<template>
  <div>
    <a-form-model layout="inline" ref="form" :model="form" style="margin-top:0px;">
      <a-form-model-item label="箱号/封号/运单号/公司编号">
        <a-input v-model="form.codeLike" />
      </a-form-model-item>
      <a-form-model-item label="持箱人">
        <a-select v-model="form.holderId" style="width:200px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in holderList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="箱态">
        <a-select v-model="form.emptyOrHeavy" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option :value="2">重箱</a-select-option>
          <a-select-option :value="1">空箱</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="始发港">
        <a-select v-model="form.startPortId" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in portList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="目的港">
        <a-select v-model="form.endPortId" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in portList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="箱型">
        <a-select v-model="form.containerTypeId" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in containerList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="showModal">箱号批量查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="check">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="confirmUnload">确定卸船</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-table
      :columns="columns"
      :loading="loading"
      :data-source="data"
      :scroll="{x: 1900}"
      style="margin-top:25px;"
      :pagination="false"
      :row-key="(record,index) => index"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template slot="company" slot-scope="record">
        <a v-if="record.shipOrderCode" @click="company(record)">{{record.shipOrderCode}}</a>
        <span v-else>--</span>
      </template>
      <template slot="status" slot-scope="record">
        <span v-if="record.containerStatus === 'A'">A</span>
        <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
        <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
        <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
      </template>
    </a-table>
    <a-modal
      v-model="checkVisible"
      title="箱号批量查询"
      :body-style="{padding:'30px 40px 25px'}"
      :width="600"
      centered
      okText="查询"
      @cancel="cancelCheck"
      @ok="containerCheck"
      destroyOnClose
    >
      <a-textarea v-model="containerValue" placeholder="请输入箱号进行查询" :auto-size="{ minRows: 6 }" />
      <div style="margin-top:10px">*输入时请注意，每行一个箱号</div>
    </a-modal>
  </div>
</template>
<script>
import {
  queryPortNameList,
  queryHolderNameList,
  queryContainerTypeList
} from '@/api/boxManagementCenter'
import { queryVoyageContainerList, unloadContainer } from '@/api/orderCenter'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '公司编号',
    width: 150,
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    customRender: (text, record, index) => {
      return record.containerSealNo ? record.containerSealNo : '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode
        ? record.seagoingShipOrderCode
        : '--'
    }
  },
  {
    title: '持箱人',
    dataIndex: 'holderName',
    width: 200
  },
  {
    title: '始发港',
    dataIndex: 'startPortName'
  },
  {
    title: '目的港',
    dataIndex: 'endPortName'
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '箱态',
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '货名',
    customRender: (text, record, index) => {
      return record.goodsName ? record.goodsName : '--'
    }
  },
  {
    title: '货重（吨）',
    customRender: (text, record, index) => {
      return record.goodsWeight ? record.goodsWeight : '--'
    }
  },
  {
    title: '装船日期',
    width: 150,
    customRender: (text, record, index) => {
      return record.loadingTime ? record.loadingTime : '--'
    }
  }
]
const defaultForm = () => ({
  voyageId: '', // 航次id
  codeLike: '',
  holderId: '',
  emptyOrHeavy: '',
  containerTypeId: '',
  startPortId: '',
  endPortId: '',
  status: 2
  // voyageContainerStatus: 2
})
export default {
  name: 'unload',
  props: {
    formObj: Object
  },
  data () {
    return {
      form: {
        ...defaultForm()
      },
      pageNum: 1,
      pageSize: 0, // 全部数据
      loading: true,
      data: [],
      columns,
      holderList: [],
      containerList: [],
      portList: [],
      selectedRowKeys: [],
      selectedRows: [],
      containerValue: '',
      checkVisible: false,
      containerNoList: []
    }
  },
  methods: {
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    flowListRequest (e) {
      this.loading = true
      queryVoyageContainerList(e)
        .then(res => {
          // console.log(res)
          this.data = res.data.list
          this.loading = false
        })
        .catch(rs => {})
    },
    unloadContainerRequest (e) {
      unloadContainer(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('卸船成功！')
            this.selectedRowKeys = []
            this.selectedRows = []
            Object.assign(this.form, defaultForm())
            setTimeout(() => {
              this.$emit('setVisible', true)
            }, 500)
          }
        })
        .catch(rs => {
        })
    },
    check () {
      this.flowListRequest({
        ...this.form,
        containerNoList: this.containerNoList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      // // console.log(selectedRowKeys)
    //   // console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    confirmUnload () {
      let _t = this
      let selectNum = 0
      let idList = []
      _t.selectedRows.forEach(v => {
        idList.push(v.id)
        selectNum++
      })
      if (_t.selectedRows.length === 0) {
        _t.$message.warning('请先勾选集装箱后再进行操作')
        return false
      }
      const h = _t.$createElement
      _t.$confirm({
        title: h('div', {}, [
          h('span', '确定将这'),
          h(
            'span',
            { style: { padding: '0 3px', color: 'orange', fontSize: '20px', lineHeight: '22px' } },
            selectNum
          ),
          h('span', '个集装箱卸船？')
        ]),
        onOk () {
        //   // console.log({
        //     idList: idList,
        //     portId: _t.formObj.portId,
        //     voyageId: _t.formObj.voyageId
        //   })
          _t.unloadContainerRequest({
            idList: idList,
            portId: _t.formObj.portId,
            voyageId: _t.formObj.voyageId
          })
        }
      })
    },
    company (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, '_blank')
    },
    showModal () {
      this.containerValueT = this.containerValue
      this.checkVisible = true
    },
    containerCheck () {
      let containerNoList = this.containerValue.split(/[\s\n]/)
      // // console.log(containerNoList)
      if (containerNoList.length === 1 && containerNoList[0] === '') {
        containerNoList = []
      }
      this.containerNoList = containerNoList
      // this.form.portId = this.orderObj.portId
      this.flowListRequest({
        ...this.form,
        containerNoList: this.containerNoList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      setTimeout(() => {
        this.checkVisible = false
      }, 200)
    },
    cancelCheck () {
      this.containerValue = this.containerValueT
      this.checkVisible = false
    }
  },
  watch: {
    formObj () {
      if (this.formObj) {
        Object.assign(this.form, defaultForm())
        let { voyageId } = this.formObj
        this.form = { ...this.form, voyageId }
        this.portListRequest({
          status: 1,
          isContainerManagement: 1
        })
        this.holderListRequest({})
        this.containerListRequest({})
        this.flowListRequest({
          ...this.form,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      }
    }
  },
  mounted () {
    // // console.log(this.formObj)
    let { voyageId } = this.formObj
    this.form = { ...this.form, voyageId }
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.holderListRequest({})
    this.containerListRequest({})
    this.flowListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>
